<template>
  <el-card>
    <el-table border :data="skuList" v-loading="loading">
      <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" :alt="row.skuName" style="width: 100px; heigth: 100px" />
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" prop="price"></el-table-column>
      <el-table-column label="操作" width="280px">
        <template v-slot="{ row, $index }">
          <!-- placement="top" 提示框向上 -->
          <el-tooltip class="box-item" v-if="row.isSale === 0" effect="dark" content="上架" placement="top">
            <el-button type="success" size="small" :icon="Top" @click="skuOnSale(row)"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" v-else effect="dark" content="下架" placement="top">
            <el-button type="danger" size="small" :icon="Bottom" @click="skuCancleSale(row)"></el-button>
          </el-tooltip>
          <el-tooltip content="修改SKU" placement="top">
            <el-button type="primary" :icon="Edit" size="small"></el-button>
          </el-tooltip>
          <el-tooltip content="查看详情" placement="top">
            <el-button type="info" :icon="InfoFilled" size="small" @click="getSkuInfo(row.id)"></el-button>
          </el-tooltip>
          <el-tooltip content="删除SKU" placement="top">
            <el-button type="danger" :icon="Delete" size="small" @click="deleteSkuInfo(row.id)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页  -->
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout=" prev, pager, next, jumper,->, sizes,total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 抽屉效果 -->
    <el-drawer v-model="drawer" title="查看Sku详情" :direction="direction" size="40%">
      <el-row :gutter="10">
        <el-col :span="7">
          <div>名称</div>
        </el-col>
        <el-col :span="17">
          <div>{{ skuInfo.skuName }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <div>描述</div>
        </el-col>
        <el-col :span="17">
          <div>{{ skuInfo.skuDesc }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <div>价格</div>
        </el-col>
        <el-col :span="17">
          <div>{{ skuInfo.price }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <div>平台属性</div>
        </el-col>
        <el-col :span="17">
          <el-tag v-for="attrValue in skuInfo.skuAttrValueList" :key="attrValue.id">{{ attrValue.valueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <div>销售属性</div>
        </el-col>
        <el-col :span="17">
          <el-tag v-for="saleAttrValue in skuInfo.skuSaleAttrValueList" :key="saleAttrValue.id">{{ saleAttrValue.saleAttrValueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <div>商品图片</div>
        </el-col>
        <el-col :span="17">
          <el-carousel height="250px">
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
              <el-image :src="item.imgUrl" style="width: 100%; height: 100%"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>
<script lang="ts">
export default {
  name: "Sku",
}
</script>
<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { reqDeleteSkuInfo, reqGetAllSkuListData, reqGetOneSkuInfo, reqSkuCancleSale, reqSkuOnSale } from "@/api/product/sku"
import { InfoFilled, Edit, Delete, Top, Bottom } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(1)
const skuList = ref([])
// 定义一个skuInfo对象 用来渲染抽屉中的效果
const skuInfo = ref([])
// 抽屉相关的变量
const drawer = ref(false)
const direction = ref("rtl")
// 分页器相关的变量
const small = ref<boolean>(false)
const background = ref<boolean>(false)
const disabled = ref<boolean>(false)
// 定义一个获取skuList数据列表的函数
const getAllSkuListData = async () => {
  loading.value = true
  const result = await reqGetAllSkuListData(currentPage.value, pageSize.value)
  skuList.value = result.records
  total.value = result.total
  loading.value = false
}
onMounted(() => {
  getAllSkuListData()
})
// 分页相关的两个函数
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pageSize.value = val
  currentPage.value = 1
  getAllSkuListData()
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  currentPage.value = val
  getAllSkuListData()
}
// 5. sku上架
const skuOnSale = async row => {
  await reqSkuOnSale(row.id)
  // 提示信息
  ElMessage.success("sku上架成功")
  // 重新刷新页面
  // getAllSkuListData()
  row.isSale = 1 - row.isSale
}
// 6. sku下架
const skuCancleSale = async row => {
  await reqSkuCancleSale(row.id)
  // 提示信息
  ElMessage.success("sku下架成功")
  // 重新刷新页面
  // getAllSkuListData()
  row.isSale = 1 - row.isSale
}
// 7. 删除sku
const deleteSkuInfo = async (id: number) => {
  await reqDeleteSkuInfo(id)

  ElMessage.success("删除sku成功...")
  // 重新渲染剩余的数据
  getAllSkuListData()
}
// 8. 查看skuInfo详情信息
const getSkuInfo = async (id: number) => {
  const result = await reqGetOneSkuInfo(id)
  // console.log("drawer", result)
  drawer.value = true

  skuInfo.value = result
}
</script>

<style></style>
